<template>
	<div class="discover">
		<div class="top">
			课程详情
		</div>
		<div class="baseinfo">
			<li>夏令营</li>
			<li>价格</li>
			<li>周期</li>
			<li>时间</li>
			<li>电话</li>
		</div>
		<div class="coachinfo">
			教练员信息
			<img src="xx.jpg">
		</div>

		<div class="fixed flex">
			<li class="apply" @click='showApplydialog()'>立即报名</li>
			<li class="consult" @click='showdialog()'>咨询</li>
		</div>
		<div class="consult-dialog">
			<li>在线━(*｀∀´*)ノ亻咨询</li>
			<li>欢迎━(*｀∀´*)ノ亻来电</li>
			<div class="el-icon-error close icon" @click='hidedialog()'></div>
		</div>
		<div class="apply-dialog">
			<div class="title">
				夏令营
				<div class="el-icon-circle-close-outline icon" @click='hideApplydialog()'></div>
			</div>
			<div class="product">
				产品类型:
				<li>第一期</li>
				<li>第二期</li>
				<li class="line">1+2</li>
				<li>单价:{{price}}</li>
				<li>货存:{{stocknum}}</li>
			</div>
			<div class="count">
				<div>
					<span class="el-icon-minus" @click='minus()'></span>
					<input type="" name="" class="num" v-model='num'>
					<span class="el-icon-plus" @click='plus()'></span>
				</div>
				总价:<span style="color: red">{{totalPrice}}$</span>
			</div>
			<div class="atonce-apply">
				<router-link to='/trainorder'>
					<li>立即报名</li>
				</router-link>
			</div>
		</div>
	</div>
</template>
<script >
	import $ from 'jquery'
	export default {
		data(){
			return{
				// 默认0 没选择产品
				//数值判断 非数
				price:10,//0
				stocknum:10,//存货 0
				num:10,//0
				
			}
		},
        created:function (argument) {
       		var url = '';
       		var _this = this;
       		this.axios.get(url).then(function (data) {
       			
       		}).catch(function (argument) {
       			// body...
       		})
        },
       
        methods:{
        	minus:function (argument){
        		var _this = this;
        		this.num = this.num-1;	
        	},

        	plus:function (argument){
        		var _this = this;
        		this.num = this.num+1;
        	},

        	showdialog:function (argument) {
        		$(".consult-dialog").animate({bottom:'0px'});
        	},
        	hidedialog:function (argument) {
        		$(".consult-dialog").animate({bottom:'-120px'});
        	},

        	showApplydialog:function(){
        		$(".apply-dialog").animate({bottom:'0px'});
        	},
        	hideApplydialog(){
        		$(".apply-dialog").animate({bottom:'-305px'});
        	}
        },
        // 计算
        computed:{
        	totalPrice:function () {
        		return this.price * this.num
        	}
        },
        // 监听
        watch:{
        	num:function (newVal,oldVal) {//默认 newVal,oldVal  注意new关键字
        		// body...
        		console.log(newVal);

        		console.log(oldVal);
        		if(true) {
        			this.num == 0
        		}
        		if(this.num) {
        			this.num == 0
        		}
        	}
        }
	}
</script>
<style scoped>
	@import "../../assets/css/trainDetails.css"
</style>